<!--学生互评-->
<template>
  <div id="mutual">
    <div class="head">
      <h4 class="col-sm-6">专业班级:{{className}}</h4>
      <h4 class="col-sm-6">{{studentNo}}</h4>
    </div>
    <div class="center">
      <div class="col-sm-1"></div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            班主任、班长
          </div>
          <div class="panel-body myPanel">
            <p class="inline">班主任:{{headTeacher}}</p>
            <br><br><br>
            <p class="inline">班长: {{monitor}}</p>
          </div>
        </div>
      </div>
      <div class="col-sm-1"></div>
      <div class="col-sm-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            评价小组成员
          </div>
          <div class="panel-body myPanel">
            <div v-for="commentator in commentators">
              <p class="inline">{{commentator}}</p>
              <br>
            </div>
          </div>
        </div>
      </div>
      <div class="col-sm-1"></div>
    </div>
    <div class="myTable table-responsive">
      <table class="table">
        <thead>
        <tr>

          <th class="text-center">学号</th>
          <th class="text-center">姓名</th>
          <th class="text-center">评价</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(classNum,index) in classNums">

          <td>{{classNum.stuNumber}}</td>
          <td>{{classNum.stuName}}</td>
          <td>
            <label class="radio-inline">
              <input type="radio" value="A" v-model="picked[index]" v-bind:name="classNum.id"> A
            </label>
            <label class="radio-inline">
              <input type="radio" value="B" v-model="picked[index]" v-bind:name="classNum.id"> B
            </label>
            <label class="radio-inline">
              <input type="radio" value="C" v-model="picked[index]" v-bind:name="classNum.id"> C
            </label>
            <label class="radio-inline">
              <input type="radio" value="D" v-model="picked[index]" v-bind:name="classNum.id"> D
            </label>
          </td>
        </tr>
        </tbody>
      </table>
      <h5 class="bg-info" style="padding: 10px;background: none">注:只显示还未评价的同学</h5>
      <button class="btn btn-success btn-lg" @click='submit()'>提交</button>
    </div>
  </div>
</template>

<script>
  /*
   *评论小组
   *提交评价
   *
   * */
  import API from '../config/request';
  import {decodeData} from '../config/base64'

  export default {
    name: 'mutual',
    data() {
      return {
        msg: '',
        url: API.URL,
        tip: 0,
        major: '',
        classNumber: '',
        headTeacher: '',
        monitor: '',
        commentators: [],   //小组评价成员
        picked: {},
        classNums: [],
        className: '',
        studentNo: '',
        classId: '',
        identity: ''
      }
    },
    created() {
      this.studentNo = decodeData(localStorage.getItem('studentNo'))
      this.classId = decodeData(localStorage.getItem('classId'))
      this.identity = decodeData(localStorage.getItem('identity'))
      this.getClassPro()
      this.getAll()
     // this.getClassInfo()
      this.getUndo()
    },
    methods: {
      //拿到班级跟专业
      getClassPro: function () {
        this.$http.get(this.url + 'common/findoneclass?classId=' + this.classId).then(function (response) {
          this.className = response.bodyText
        })
      },
      getAll: function () {
        this.$http.get(this.url + 'common/listclassadmin?classId=' + this.classId).then(function (response) {
          let j = 0
          for (let i = 0; i < response.body.length; i++) {
            console.log(response.body[i])
            if (response.body[i].identity === 1) {
              this.headTeacher = response.body[i].stuNum
            } else if (response.body[i].identity === 2) {
              this.monitor = response.body[i].stuNum
            } else {
              this.commentators[j] = response.body[i].stuNum
              j++
            }
          }
        })
      },
      //拿还未评价的学生
      getUndo: function () {
        this.$http.get(this.url + 'evaluation/getnotevaluate?stuId='+this.studentNo +'&classId='+this.classId).then(function (response) {
          this.classNums = response.body
        }, function () {
          alert("班级信息获取失败")
        })
      },
      //拿本班所有的学生
      getClassInfo: function () {
        this.$http.get(this.url + 'common/listclassStudent?classId=' + this.classId).then(function (response) {
          this.classNums = response.body
        }, function () {
          alert("班级信息获取失败")
        })
      },
      submit: function () {
        let self = this
        let tip = 0
        let promise = new Promise(function (resolve, reject) {
          for (let i in self.picked) {
            let data = {
              'evaluatorNum': self.studentNo,
              'beEvaluatedNum': self.classNums[i].stuNumber,
              'grade': self.picked[i],
              'identity' : self.identity
            }
            self.$http.post(self.url + 'evaluation/create', data,
              {emulateJSON: true}
            ).then(function () {
              ++tip
              self.getUndo()
            },function () {
              alert(i.stuNumber + ',提交失败')
            })
          }
          resolve()
        })
        promise.then(function () {
          setTimeout(function(){
            alert('提交成功'+tip+'人')
          },500)   //无法保证同步完成，只好设置延迟，原则上可以
        })
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../../node_modules/bootstrap/dist/css/bootstrap.min.css";

  .head {
    width: 100%;
    height: 70px;
  }

  .center {
    width: 100%;
    height: 500px;
    display: block;
  }

  .myTable {
    width: 100%;
    display: block;
  }

  @media screen and (min-width: 800px) {
    .head {
      width: 100%;
      height: 50px;
      display: block;
    }

    .center {
      width: 100%;
      height: 250px;
      display: block;
    }

    .myTable {
      width: 100%;
      display: block;
    }
  }

</style>
